<template>
  <div id="app" :style="{ height: $store.state.sizes.height }">
    <NavHeader v-show="$store.state.showHeader" class="app-head" :style="{ height: $store.state.sizes.headHeight+'px' }"
      ref="header" />
    <router-view class="app-main" :style="{ height: $store.state.sizes.mainHeight }" @init="init" />
  </div>
</template>

<script>
  import {
    Component,
    Prop,
    Vue,
    Watch
  } from 'vue-property-decorator'
  import NavHeader from '@/components/main/NavHeader';
  import websoct from '@/static/plugins/websocket';

  @Component({
    components: {
      NavHeader
    }
  })
  export default class App extends Vue {
    initSize() {
      this.$store.commit('initSizes')
    }

    init() {
      this.$store.dispatch('init');
      this.$router.push('/home')
      if (this.$refs.header) {
        this.$refs.header.toHome()
      }
    }


    created() {
      this.init()
      this.initSize()
      window.onresize = this.initSize
    }

    mounted() {} // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} // 生命周期 - 创建之前
    beforeMount() {} // 生命周期 - 挂载之前
    beforeUpdate() {} // 生命周期 - 更新之前
    updated() {} // 生命周期 - 更新之后
    beforeDestroy() {} // 生命周期 - 销毁之前
    destroyed() {} // 生命周期 - 销毁完成
    activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang="scss">
  @import '~@/assets/styles/base.scss';
  @import '~@/assets/styles/size_small.scss';
  // @import '~@/assets/styles/back_blue.scss';

  .app-head {
    padding: 0px !important;
  }

  .app-main {
    padding: 0px 20px !important;
  }
</style>
